﻿@page "/table-simple-sticky"

<PageTitle>Css Sticky Table</PageTitle>

<h4>垂直滚动 + 水平滚动</h4>
<ul class="text-danger">
    <li>
        边框不会 Sticky，边框会跟随滚动。
    </li>
</ul>
<div class="wrapper limitHeight">
    <table class="table table-bordered mb-0" style="width: 2000px;">
        <thead class="table-light" style="">
            <tr class="" style="">
                <th>#</th>
                <th>First</th>
                <th>Last</th>
                <th>Handle</th>
                <th>Handle</th>
                <th>Handle</th>
            </tr>
        </thead>
        <tbody>
            @foreach (int i in Enumerable.Range(1, 20))
            {
                <tr>
                    <td>@i</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@@mdo</td>
                    <td>@@mdo</td>
                    <td>@@mdo</td>
                </tr>
            }
        </tbody>
    </table>
</div>


<style>

    .table-bordered {
        --bs-border-width: 2px;
    }

    .wrapper table {
        border-collapse: collapse;
        width: 100%;
    }

    .wrapper th {
        background-color: #f2f2f2;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .wrapper th, .wrapper td {
        padding: 8px;
        text-align: left;
        white-space: nowrap;
    }

        .wrapper td:first-child, .wrapper th:first-child {
            position: sticky;
            left: 0;
            background-color: #f2f2f2;
            z-index: 5;
        }

        .wrapper th:first-child {
            z-index: 15;
        }
</style>